<@app.html>
    <@app.head>
    <title>好驿达换电网</title>
    <script>
        function showMsg(msg) {
            $('.tips').html(msg);
            $.messager.alert('提示信息', msg, 'info');
        }

        function ok() {
            if ($('#username').val() == '' || $('#username').val() == '用户名') {
                showMsg('请录入用户名');
                $('#username').focus();
                return;
            }
            if ($('#password').val() == '' || $('#password').val() == '密码') {
                showMsg('请录入密码');
                $('#password').focus();
                return;
            }
            if ($('#auth_code').val() == '' || $('#auth_code').val() == '验证码') {
                showMsg('请录入验证码');
                $("#captchaImg").attr("src", '${contextPath}/security/main/auth_img.htm?_' + new Date().getTime());

                $('#auth_code').focus();
                return;
            }

            $.post('${contextPath}/security/main/login.htm', {
                username: $('#username').val(),
                password: $('#password').val(),
                authCode: $('#auth_code').val()
            }, function (json) {
                if (json.success) {
                    document.location.href = '${contextPath}/security/main/index.htm';
                    return;

                } else {
                    $("#captchaImg").attr("src", '${contextPath}/security/main/auth_img.htm?_' + new Date().getTime());
                    showMsg(json.message);
                }
            }, 'json');
        }

        $(function () {
            var username = $.cookie('username');
            if (username != undefined && username != '') {
                $('#cookie_flag').attr('checked', 'checked');
                $('#username').val(username);
                $('#password').focus();
            } else {
                $('#username').focus();
            }

            $('#username').keydown(function (event) {
                if (event.keyCode == 13) {
                    if ($('#username').val() == '') {
                        showMsg('请录入用户名');
                        $('#username').focus();
                        return;
                    } else {
                        $('#password').focus();
                    }

                }
            });
            $('#password').keydown(function (event) {
                if (event.keyCode == 13) {
                    if ($('#password').val() == '') {
                        showMsg('请录入密码');
                        $('#password').focus();
                        return;
                    } else {
                        $('#auth_code').focus();
                    }
                }
            });
            $('#auth_code').keydown(function (event) {
                if (event.keyCode == 13) {
                    if ($('#auth_code').val() == '') {
                        showMsg('请录入验证码');
                        $("#captchaImg").attr("src", '${contextPath}/security/main/auth_img.htm?_' + new Date().getTime());
                        $('#auth_code').focus();
                        return;
                    } else {
                        ok();
                    }
                }
            });
        })
    </script>
    </@app.head>
    <@app.body>

    <div class="container login_wrap">
        <div class="login_box">
            <div class="logo_box"><img src="${app.imagePath}/login_logo.png"/></div>
            <div class="login_img"></div>
            <div class="login_con">
                <h2>欢迎登录</h2>
                <hr style="height:1px;border:none;border-top:1px solid #b3adad;">
                <p class="input_bg">
                    <label class="username">用户名</label><input type="text" class="text" maxlength="18"
                                                              onfocus="if(this.value=='用户名') {this.value='';this.style.color='#434343';}"
                                                              onblur="if(this.value=='') {this.value='用户名';this.style.color='#ccc';}"
                                                              value="用户名" id="username"/>
                </p>
                <p class="input_bg">
                    <label class="password">密码</label><input type="password" class="password" maxlength="16"
                                                             onfocus="this.style.color='#434343';document.getElementById('pwd_tips').style.display='none'"
                                                             onblur="if(this.value==''){document.getElementById('pwd_tips').style.display='block'}"
                                                             id="password"/>
                    <span id="pwd_tips">密码</span>
                </p>
                <p class="input_bg">
                    <label class="captcha">验证码</label><input type="text" class="text" maxlength="4"
                                                             onfocus="if(this.value=='验证码') {this.value='';this.style.color='#434343';}"
                                                             onblur="if(this.value=='') {this.value='验证码';this.style.color='#ccc';}"
                                                             value="验证码" id="auth_code"/>
                    <img src="${contextPath}/security/main/auth_img.htm" id="captchaImg" class="captcha_img" />
                </p>
                <p class="submit"><a href="javascript:void(0)" onclick="ok()">登 录</a></p>
                <p class="tips"></p>
            </div>
        </div>
    </div>
    </@app.body>
</@app.html>